<template>
    <div>
        <h2 class="title">{{ MainTitle }}</h2>
        <div class="imgs">
            <img
                v-for="(item, index) in ImgUrls"
                :key="index"
                :src="baseUrl + item"
                alt=""
                style="width: 200px; heigth: 200px"
            />
        </div>
        <ul class="base-info">
            <li>
                分类名称：{{ OneCategoryName }}> {{ TwoCategoryName }} >
                {{ ThreeCategoryName }} > {{ FourCategoryName }}
            </li>
            <li>商品名称：{{ GoodsName }}</li>
            <li>商品描述：{{ GoodsDetail }}</li>
            <li>重量：{{ Weight }}</li>
        </ul>
        <h4 class="item-title">规格价格</h4>
        <el-table :data="specTable" border stripe class="item-table">
            <el-table-column label="规格价格名称">
                <template slot-scope="scope">
                    {{ scope.row.GoodsSpecValueName1 }} :
                    {{ scope.row.GoodsSpecValueName2 }}
                </template>
            </el-table-column>
            <el-table-column label="出售价" prop="Price" />
            <el-table-column label="供货价" prop="PriceSupply" />
            <el-table-column label="库存" prop="Stock" />
        </el-table>
        <h4 class="item-title">参数模型</h4>
        <el-table :data="productParamTable" border stripe class="item-table">
            <el-table-column label="属性名称" prop="Name" />
            <el-table-column label="提示信息" prop="Prompt" />
            <el-table-column label="排序" prop="Sort" />
            <el-table-column label="参数值" prop="Value" />
            <el-table-column label="单位" prop="Unit" />
        </el-table>
        <h4 class="item-title">详情图片</h4>
        <div class="imgs">
            <img
                v-for="(item, index) in InfoImgUrls"
                :key="index"
                :src="baseUrl + item"
                alt=""
                style="width: 200px; heigth: 200px"
            />
        </div>
    </div>
</template>

<script>
import setting from "@/setting";
export default {
    name: "previewProduct",
    props: {
        previewData: {
            type: Object,
            default: () => {},
        },
        change: {
            type: Boolean,
        },
    },
    data() {
        return {
            allData: {},
            baseUrl: setting.apiUrl,
            MainTitle: null,
            ImgUrls: null,
            OneCategoryName: null,
            TwoCategoryName: null,
            ThreeCategoryName: null,
            FourCategoryName: null,
            GoodsName: null,
            GoodsDetail: null,
            Weight: null,
            specTable: null,
            productParamTable: null,
            InfoImgUrls: null,
        };
    },

    watch: {
        change(newValue, oldValue) {
            this.MainTitle = this.previewData.MainTitle;
            this.ImgUrls = this.previewData.ImgUrls;
            this.OneCategoryName = this.previewData.OneCategoryName;
            this.TwoCategoryName = this.previewData.TwoCategoryName;
            this.ThreeCategoryName = this.previewData.ThreeCategoryName;
            this.FourCategoryName = this.previewData.FourCategoryName;
            this.GoodsName = this.previewData.GoodsName;
            this.ImgUrls = this.previewData.ImgUrls;
            this.GoodsDetail = this.previewData.GoodsDetail;
            this.Weight = this.previewData.Weight;
            this.specTable = this.previewData.specTable;
            this.productParamTable = this.previewData.productParamTable;
            this.InfoImgUrls = this.previewData.InfoImgUrls;
        },
    },
    created() {
        this.MainTitle = this.previewData.MainTitle;
        this.ImgUrls = this.previewData.ImgUrls;
        this.OneCategoryName = this.previewData.OneCategoryName;
        this.TwoCategoryName = this.previewData.TwoCategoryName;
        this.ThreeCategoryName = this.previewData.ThreeCategoryName;
        this.FourCategoryName = this.previewData.FourCategoryName;
        this.GoodsName = this.previewData.GoodsName;
        this.ImgUrls = this.previewData.ImgUrls;
        this.GoodsDetail = this.previewData.GoodsDetail;
        this.Weight = this.previewData.Weight;
        this.specTable = this.previewData.specTable;
        this.productParamTable = this.previewData.productParamTable;
        this.InfoImgUrls = this.previewData.InfoImgUrls;
    },
};
</script>

<style lang="scss" scoped>
.title {
    text-align: center;
}
.imgs {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    img{
      margin:0 10px
    }
}
.base-info {
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    li {
        width: 50%;
    }
}
.item-title {
    margin-top: 10px;
}
.item-table {
    margin-top: 10px;
}
</style>